<template>
  <div class="shop">
     <el-form ref="filtrateForm" :inline="true" size="mini" :model="form" class="form">
       <el-form-item label = "所属区域:">
          <el-select style="width:130px;" v-model="form.province" filterable placeholder="省份" @change="onChangeProvince">
             <el-option v-for="item in provinceList" :key="item.id" :label="item.province_name" :value="item.id"></el-option>
          </el-select>
           <el-select style="width:130px;" v-model="form.city" filterable placeholder="市/区" >
             <el-option v-for="item in cityList" :key="item.id" :label="item.city_name" :value="item.id"></el-option>
          </el-select>
       </el-form-item>

       <el-form-item label = "账号状态:">
          <el-select style="width:130px;" v-model="form.status" filterable placeholder="全部" >
             <el-option v-for="item in statusList" :key="item.id" :label="item.status" :value="item.id"></el-option>
          </el-select>
       </el-form-item>

       <el-form-item label = "商家分类:">
          <el-select style="width:130px;" v-model="form.status" filterable placeholder="全部">
             <el-option v-for="item in statusList" :key="item.id" :label="item.status" :value="item.id"></el-option>
          </el-select>
       </el-form-item>
        <el-form-item label = "小店分组:">
          <el-select style="width:130px;" v-model="form.group" filterable placeholder="全部">
             <el-option v-for="item in groupList" :key="item.id" :label="item.status" :value="item.id"></el-option>
          </el-select>
       </el-form-item>

        <el-form-item label = "上架商品:">
          <el-select style="width:130px;" v-model="form.isgrounding" filterable placeholder="全部">
             <el-option v-for="item in groupList" :key="item.id" :label="item.status" :value="item.id"></el-option>
          </el-select>
       </el-form-item>

       <br/>
         <el-form-item label = "上架活动:">
          <el-select style="width:130px;" v-model="form.activity" filterable placeholder="全部">
             <el-option v-for="item in groupList" :key="item.id" :label="item.status" :value="item.id"></el-option>
          </el-select>
       </el-form-item>
         <el-form-item label = "上架优惠券:">
          <el-select style="width:130px;" v-model="form.coupon" filterable placeholder="全部">
             <el-option v-for="item in groupList" :key="item.id" :label="item.status" :value="item.id"></el-option>
          </el-select>
       </el-form-item>

        <el-form-item >
              <el-input v-model="keywords" placeholder="输入小店名或ID搜索"></el-input>
       </el-form-item>
       <el-form-item>
          <el-button type="primary" @click="searchShop">搜索</el-button>
       </el-form-item>
     </el-form>

     <el-table :data="tableData" style="width:100%"  max-height="680" :cell-style="tc" :header-cell-style="tccolor">
         <el-table-column prop="UID" label="UID" width ="120"></el-table-column>
         <el-table-column prop="name" label="幕后街名称" width ="240"></el-table-column>
         <el-table-column prop="username" label="用户名" width ="180"></el-table-column>
         <el-table-column prop="area" label="所属区域" width ="240"></el-table-column>
         <el-table-column prop="status" label="主账号状态" width ="120">
            <template slot-scope="scope">
               <el-switch :key="scope.row.id" :active-value='1' :inactive-value='0' :value="scope.row.status" @change="isUseActivityChange(scope.row.id,$event)"></el-switch>
            </template>
         </el-table-column>
         <el-table-column prop="category" label="商家分类" width ="100"></el-table-column>
         <el-table-column prop="own" label="小店分组" width ="100"></el-table-column>
         <el-table-column prop="isgood" label="上架商品" width ="100">
            <template slot-scope="scope">
               <p v-if="scope.row.isgood == '1'">是</p>
               <p v-else>否</p>
            </template>
         </el-table-column>
         <el-table-column prop="isActivity" label="上架活动" width ="100">
               <template slot-scope="scope">
                  <p v-if="scope.row.isActivity == '1'">是</p>
                    <p v-else>否</p>
               </template>
         </el-table-column>
         <el-table-column prop="isCoupon" label="上架优惠券" width ="120">
           <template slot-scope="scope">
               <p v-if="scope.row.isCoupon == '1'">是</p>
               <p v-else>否</p>
           </template>
         </el-table-column>
         <el-table-column  label="操作" width ="240">
             <template slot-scope="scope">
                  <el-button size="mini" @click="openShopDetail(scope.row.id)">详情</el-button>
                  <el-button size="mini" type="danger" @click="deleteShop(scope.row.id)">移除</el-button>
             </template>
         </el-table-column>
     </el-table>
  </div>
</template>

<script>
// import router from '@/router/index'
  export default {
      data(){
        return{
         form:{
            cid:'',
          province:'',
          city:'', 
          status:'',
          group:'',
          isgrounding:'',
          activity:'',
          coupon:'',
        },
        keywords:'',
        provinceList:[],
        cityList:[],
        statusList:[],
        groupList:[],
        tableData:[{
            UID:'10001',
            name:'幕后街便利店',
            username:'15325412368',
            area:'浙江省.杭州市.滨江区',
            status:1,
            category:'丽人美发',
            own:'xxx联盟',
            isgood:'1',
            isActivity:'1',
            isCoupon:'1',
        },{
           UID:'10001',
            name:'幕后街便利店',
            username:'15325412368',
            area:'浙江省.杭州市.滨江区',
            status:0,
            category:'丽人美发',
            own:'xxx联盟',
            isgood:'1',
            isActivity:'1',
            isCoupon:'0',
        }],
        }
      },
      mounted() {
         this.form.cid = this.$route.query.cid;
         console.log(this.form)
      },
      methods:{
        onChangeProvince(e){
             //切换省,同时获取省对应的城市
             this.form.province = e
             //后面加获取对应省的城市接口
        },
      
        //搜索对应小店
        searchShop(){

        },
         tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
        //打开小店详情
        openShopDetail(){
            //   router.push({path:'/'})
            //跳转小店详情
            this.$router.push('./shoplistDetail')
        },
        //删除小店,删除成功后重新获取小店列表
        deleteShop(){
             this.$confirm('确定把小店移出该分组?','温馨提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(() => {
               //移除小店
            })
        },
        //更改小店禁用状态
        isUseActivityChange(id,e){
           //更新商品
            console.log(id+e)
           //更新成功后重新获取商品
        }
      }
  }
</script>

<style lang="scss" scoped>
.shop{
   padding: 20px;
}
</style>